<template>
	<div>
		<el-dialog title="原材料列表" center v-model="dialogTableVisible" width="70%" append-to-body @close="close">
			<div class="app-container">
				<div class="bgWhite radius8 pb30 ">
					<div class="flex col-top row-between  p20">
						<div style="width: 100%;">
							<div class="flex col-center row-between mb20">
								<div>
									已选择<span class="main-color">{{ids.length}}</span>个原料
								</div>
								<div class="flex col-center">
									<span class="fs14 mr10">关键字</span>
									<el-input v-model="queryParams.keyword" placeholder="请输入" clearable
										class="resetInput" style="width: 200px;margin-right: 15px;"
										@keyup.enter="handleQuery" />
									<el-button type="defaultBtn" @click="handleQuery">搜索
									</el-button>
								</div>
							</div>
							<el-table ref="table" v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
								background: '#FAFAFA',
								color: '#0C1019',
								height: '54px',
							  }" :cell-style="{ height: '54px' }" @select="handleSelectionChange" @row-click="handleRowClick">
								<el-table-column type="selection" width="55" align="center" />
								<el-table-column label="原料名称" align="center">
									<template v-slot="scope">
										<div class="main-color">{{scope.row.materialName}}</div>
									</template>
								</el-table-column>
								<el-table-column label="原料ID" align="center" prop="materialId" width="120"/>
								<el-table-column label="最新价格（元/吨）" align="center" prop="latestPrice"/>
								<el-table-column label="更新时间" align="center" prop="updateTime"/>
								<el-table-column label="更新人" align="center" prop="updatePerson"/>
							</el-table>
							<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
							<div class="text-right mt30">
								<el-button class="cancelSubBtn" @click="dialogTableVisible = false">取 消</el-button>
								<el-button type="primary" @click="dataSubmit" class="mainSubBtn">确 定</el-button>
							</div>
						</div>
					</div>
				</div>

			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		rawList//原材料列表
	} from "@/api/business/cost";
	export default {
		props:{
			idArr:{
				type:Array,
				default:res=>{
					return []
				}
			}
		},
		data() {
			return {
				dialogTableVisible: false,
				loading: true, // 遮罩层
				ids: this.idArr, // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				total: 0, // 总条数
				list: [], // 产品表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', // 产品名称 品牌名称 产品编码
				}, //查询参数
				selectList: [], //选中的数据
			}
		},
		watch:{
			idArr(val){
				this.ids = val
				//是否选中
				this.checkList()
			}
		},
		created() {
			this.getList()
		},
		methods: {
			open(){
				this.selectList = []
				this.dialogTableVisible = true
			},
			close(){
				this.dialogTableVisible = false
			},
			isSelect(row, index) {
				if (row.status == true) {
					return true;
				}
			},
			resetAdd() {
				this.reset()
				this.treeFormOpen = true
			},
			reset() {
				this.form = {
					name: '',
					parentId: '', //父id
					ancestors: '', //id链
					level: '', //层级
					id: ''
				}
			},	
			
			//查询列表
			getList() {
				this.loading = true;
				rawList(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
					this.checkList()
				});
			},
			checkList(){
				this.$nextTick(() => {
					this.list.map((item) => {
						if (this.ids.includes(item.id)) {
							item.flag = true
							this.$refs.table.toggleRowSelection(item, true)
						}else{
							item.flag = false
							this.$refs.table.toggleRowSelection(item, false)
						}
					})
					this.$forceUpdate()
				})
			},
			// 点击tab
			tabPanel(item) {
				this.tid = item.id
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 点击一行选中
			handleRowClick(row) {
				// console.log(row,'row=====')
				// console.log(row.flag,'row=====')
				// const flag = !row.flag
				// // console.log(flag,'flag')
				// // if (this.isRadioMode) {
				// // 	this.$refs['table'].clearSelection()
				// // 	this.tableData.forEach((v) => {
				// // 		v.flag = false
				// // 	})
				// // }
				// row.flag = flag
				// this.$refs['table'].toggleRowSelection(row, flag)
				// for (let i = 0; i < this.ids.length; i++) {
				// 	if(row.id == this.ids[i] && row.flag == false){
				// 		this.ids.splice(i,1)
				// 	}
				// }
			},
			// 多选框选中数据
			handleSelectionChange(val,row) {
				  const checkedIndex = this.ids.findIndex(_row => _row === row.id)
				  if (checkedIndex > -1) {
					  this.selectList.splice(checkedIndex,1)
				    // 选中剔除
				    this.ids.splice(checkedIndex, 1)
				  } else {
				    // 未选中压入
				    this.ids.push(row.id)
					this.selectList.push(row)
				  }
				console.log( this.ids,' this.ids')
				console.log(val,'val')
				return false
				let allIds = []
				selection.map(item => {
					if (!allIds.includes(item.id)) {
						allIds.push(item.id)
					}
				})
				this.selectList = allIds
				console.log(this.selectList,'allIds')
				// console.log(selection,'selection===')
				// let allIds = [...this.ids];
				// selection.map(item => {
				// 	if (!allIds.includes(item.id)) {
				// 		allIds.push(item.id)
				// 	}
				// })
				// this.ids = [...allIds]
				
				// this.$emit('getValue', this.ids)
				// this.selectList = selection
				// console.log(this.selectList, 'seleclist')
				// this.ids = selection.map((item) => item.id);
				// this.single = selection.length !== 1;
				// this.multiple = !selection.length;
			},
			// 确认选中
			dataSubmit(){
				console.log(this.ids,'this.ids')
				if(this.ids.length == 0){
					this.$modal.msgError("请至少选择一条");
					return false;
				}
				this.dialogTableVisible = false
				this.$emit('checkData',this.selectList)
			}
		}
	}
</script>

<style>
	.active::after {
		content: '';
		position: absolute;
		width: 32px;
		height: 2px;
		opacity: 1;
		background: rgba(77, 172, 177, 1);
		left: 28px;
		bottom: -20px;
	}

	.custom-tree-node {
		flex: 1;
	}
</style>